<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
Vue监视数据的原理
1.Vue会监视data中所有层次的数据
2.如何监测对象中的数据
通过setter实现监视，且要在new Vue时传入要监测的数据
对象中后追加的属性，Vue默认不做响应式处理 
如需给后添加的属性做响应式，请使用如下API
Vue.set(target,propertyName/index,vaue)或
vm.$set(target,propertyName/index,value)
3.如何监测数组中的数据
通过包裹数组更新元素的方法实现，本质就是做了两件事情：
调用原生对应的方法对数组进行更新
重新解析模板，进而更新页面
4.在Vue中修改数组中的某个元素一定要用如下方法
使用这些API：push()、pop()、shift()、unshift()、splice() sort() reverse()
Vue.set() 或 vm.$set()
注意：Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象添加属性 this vm.data vm._data这些都是不行的
     -->
</head>

<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="age++">年龄+1岁</button> <br>
        <button @click="f1">添加性别属性,默认值:男</button> <br>
        <button @click="student.sex='未知'">修改性别</button> <br>
        <button @click="f2">在列表首位添加一位朋友</button> <br>
        <button @click="f3">修改第一个朋友的名字为张三</button> <br>
        <button @click="f4">添加一个爱好</button> <br>
        <button @click="f5">修改第一个爱好为：开车</button><br>
        <h2>姓名：{{student.name}}</h2>
        <h2>年龄：{{student.age}}</h2>
        <h2 v-show="student.sex">性别：{{student.sex}}</h2>
        <h2>爱好：</h2>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
        <h2>朋友们：</h2>
        <ul>
            <li v-for="(p,index) in student.friends" :key="index">{{p.name}}---{{p.age}}</li>
        </ul>


    </div>
    <script src="../vue.js"></script>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: "#root",
            data:
            {
                student: {
                    name: 'tom',
                    age: 18,
                    hobby: ['抽烟', '喝酒', '烫头'],
                    friends: [{ name: 'jerry', age: 35 }, { name: 'tony', age: 36 }]
                }

            },
            methods: {
                f1() {
                    Vue.set(this.student, 'sex', '男')
                    //this.$set(this.student,'sex','男')
                },
                f2()
                {
                    this.student.friends.unshift({name:'jack',age:70})
                },
                f3()
                {
                    //Vue.set(this.student.friends,0,{name:'张三',age:'20'})   //两种方式修改数组
                    this.student.friends[0].name='张三'
                    
                },
                f4()
                {
                    this.student.hobby.push('打篮球')
                   // Vue.set(this.student.hobby,3,'打篮球')  //两种方式去添加
                },
                 f5()
                {
                    //Vue.set(this.student.hobby,0,'开车')
                    this.student.hobby.splice(3,4,'开车')
                   //this.student.hobby[0]='开车'   //如果数组里不是对象的话 不能通过索引的值去修改 只能通过set方法 或者数组的方法
                } 

                //添加的话 不管数组里是对象还是字符串 都只能通过set和数组方法push,unshift这些来添加  一共2种方法
                //修改的话 数组里是对象的话 除了可以通过set和数组方法splice之外，还可以通过索引值来修改对象的属性
            }
        })
    </script>
</body>

</html>